<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>

<body>
    <!--  
    因为form发送请求会跳转页面

    可以使用Ajax完成无跳转的请求

    Ajax： Asynchrous  JavaScript And XML  异步的js和xml（在js中发送异步的请求）

    html： hyper text Markup Language 超文本标记语言
    xml: extensible Markup Language 可扩展标记语言

    早期请求时数据的传递格式使用的是xml

    现在都是json: JavaScript Object Notation 即js对象表示法

 -->
    <script>
        // XMLHttpRequest()
        //对象用来与服务端进行交互
        // 1.构建一个XMLHttpRequest()对象
        var xhr = new XMLHttpRequest();
        //2.监听请求状态的函数  一旦发送一个请求请求会经历5个阶段
        xhr.onreadystatechange = function () {
            // xhr.readyState获取当前请求状态的  状态值
            //0 - 5
            // console.log(xhr.readyState);
            if (xhr.readyState === 0) {
                console.log('请求尚未初始化,open执行之前');
            } else if (xhr.readyState === 1) {
                console.log('请求初始化完成,open执行完,send还没执行')
            } else if (xhr.readyState === 2) {
                console.log("send执行,服务端尚未处理")
            } else if (xhr.readyState === 3) {
                console.log("服务端接收到了,开始处理")
            }
            else if (xhr.readyState === 4) {
                console.log("服务端处理完成,作出响应，请求结束")
                // xhr.responseText获取响应数据
                // 当前请求地址返回回来的数据是json字符串
                console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                console.log(data)
            }
        }
        //3.配置请求信 息 请求类型 请求地址
        // 参数1: 请求类型
        // 参数2： 请求地址（url）
        // 参数3： 是否发送异步请求（可省）
        xhr.open("get", "https://cnodejs.org/api/v1/topics");
        // 4.发送这个请求
        xhr.send();
    </script>
</body>

</html>